import React, { useState } from "react";
import {
  ResultPage,
  Card,
  Button,
  Popup,
  CalendarPickerView,
} from "antd-mobile";
import styles from "./index.module.css";
import { Exchange } from "@react-vant/icons";
import { Swiper, Image } from "react-vant";
import dayjs from "dayjs";
import { useNavigate } from "react-router-dom";
import { useSelector,useDispatch } from "react-redux";
import {CExchangeCity} from "../../store/CitySlice"
function Index() {
  const dispatch=useDispatch()
  const navigate = useNavigate();
  const [date, setDate] = useState(dayjs().format("YYYY-MM-DD"));
  // const [start,setStart]=useState("北京")
  // const [end,setend]=useState("广州")
  const [visible1, setVisible1] = useState(false);
  const { start, end } = useSelector((state) => state.CitySlice);
  const images = [
    "https://img.yzcdn.cn/vant/apple-1.jpg",
    "https://img.yzcdn.cn/vant/apple-2.jpg",
    "https://img.yzcdn.cn/vant/apple-3.jpg",
  ];
  // const handleExChange=()=>{
  //   const aa=start
  //   setStart(end)
  //   setend(aa)
  // }
  const handleToCity = (type) => {
    navigate(`/city/${type}`);
  };
  const handleToList = () => {
    navigate(`/list?start=${start}&end=${end}&date=${date}`);
  };
  return (
    <div>
      <ResultPage
        status=""
        title="九州票务购票平台"
        description="内容详情可折行"
      >
        <Card>
          <div className={styles.homeitem_city}>
            <span onClick={() => handleToCity("start")}>{start}</span>
            <Exchange onClick={(()=>dispatch(CExchangeCity()))}/>
            <span onClick={() => handleToCity("end")}>{end}</span>
          </div>

          <div
            className={styles.homeitem_time}
            onClick={() => setVisible1(true)}
          >
            {date}
          </div>

          <div className={styles.home_text}>
            <span>高铁/火车 持续为你服务</span>
          </div>

          <Button
            block
            color="primary"
            size="large"
            className={styles.homeitem_button}
            onClick={() => handleToList()}
          >
            查询车票
          </Button>

          <div className={styles.demo_swiper}>
            <Swiper>
              {images.map((image) => (
                <Swiper.Item key={image}>
                  <Image lazyload src={image} />
                </Swiper.Item>
              ))}
            </Swiper>
          </div>
        </Card>
      </ResultPage>

      <Popup
        visible={visible1}
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
      >
        <CalendarPickerView
          // min={dayjs()}
          // max={dayjs(dayjs().add(20, "day"))}
          onChange={(val) => {
            setDate(dayjs(val).format("YYYY-MM-DD"));
            setVisible1(false);
          }}
        />
      </Popup>
    </div>
  );
}

export default Index;
